<template>
    <header class="header">
      <div class="header-content">
        <div class="logo">
          <h1>Vue Demo</h1>
        </div>
        <nav class="nav">
          <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">联系方式</a></li>
          </ul>
        </nav>
      </div>
    </header>
  </template>
  
  <script>
  export default {
    name: 'TheHeader'
  }
  </script>
  
  <style scoped>
  .header {
    background-color: #3498db;
    color: white;
    padding: 1rem 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
  
  .header-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
  }
  
  .logo h1 {
    font-size: 1.8rem;
    font-weight: 700;
  }
  
  .nav ul {
    display: flex;
    list-style: none;
  }
  
  .nav ul li {
    margin-left: 2rem;
  }
  
  .nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
  }
  
  .nav ul li a:hover {
    color: #f0f0f0;
  }
  </style>